<template>
  <div id="print-table">
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;padding:5px;"
      row-key="id"
      border
      ref="singleTable"
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      :header-cell-style="{
            background: '#333333',
            color: '#ffffff',
            textAlign: 'center'
          }"
      @selection-change="selectListChanage"
      @select="selectChanage"
      @select-all="selectAllChanage"
    >
      <el-table-column align="center" type="selection" width="55"></el-table-column>
      <el-table-column align="center" prop="deliveryId" label="批号" width="240"></el-table-column>
      <el-table-column align="center" prop="deliveryMan" label="递送人员" width="180"></el-table-column>
      <el-table-column align="center" prop="deliveryTime" label="递送日期" width="180"></el-table-column>
      <el-table-column align="center" prop="bloodSum" label="总量"></el-table-column>
      <el-table-column align="center" prop="receiveDepart" label="验收机构"></el-table-column>
      <el-table-column align="center" prop="memo" label="备注"></el-table-column>
      <el-table-column align="center" prop="courier" label="快递人员"></el-table-column>
      <el-table-column align="center" prop="courierNum" label="快递单号"></el-table-column>
      <el-table-column align="center" prop="deliveryMan" label="操作者"></el-table-column>
      <el-table-column align="center" prop="deliveryTime" label="操作日期"></el-table-column>
      <el-table-column align="center" prop="printNumber" label="打印次数"></el-table-column>
      <el-table-column align="center" label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.pTrue != true"
            size="mini"
            type="primary"
            style="background:#2669F3"
            @click="clickDetails(scope.row)"
          >详情</el-button>
          <el-button
            v-if="scope.row.pTrue != true"
            size="mini"
            type="primary"
            style="background:#2669F3"
            @click="clickEdit(scope.row)"
          >修改</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script >
export default {
  name: "tableTree",
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    tableTitle: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {};
  },

  mounted() {},

  methods: {
    // 详情
    clickDetails(v) {
      this.$emit("clickDetails", v);
    },
    // 修改
    clickEdit(v) {
      this.$emit("clickEdit", v);
    },
    // 点击去全选
    selectAllChanage(v) {
      // 如果选择数据为空则清空
      v.forEach(item => {
        if (item.pTrue) {
          item.children.forEach(element => {
            this.$refs.singleTable.toggleRowSelection(element, true);
          });
        } else {
          this.$refs.singleTable.clearSelection();
        }
      });
    },
    // 选中数据
    selectListChanage(v) {
      let data = [];
      v.forEach(item => {
        if (item.pTrue && item.children && item.children.length > 0) {
          item.children.forEach(i => {
            data.push(i);
          });
        } else {
          data.push(item);
        }
      });
      this.$emit("tabSelectChange", data);
    },
    // 勾选数据
    selectChanage(rows, row) {
      let refsElTable = this.$refs.singleTable;
      let selected = rows.length && rows.indexOf(row) !== -1;
      if (row.pTrue && row.children && row.children.length > 0) {
        row.children.forEach(i => {
          this.$refs.singleTable.toggleRowSelection(i, true);
        });
      }
      // 判断是否点击父级，是的清空
      if (selected == false) {
        if (row.pTrue) {
          row.children.forEach(i => {
            refsElTable.toggleRowSelection(i, false);
          });
        }
      }
    }
  }
};
</script>

<style lang="less">
#print-table {
  .el-table__row--level-1 {
    td {
      .cell {
        .el-checkbox {
          margin-left: 20px;
        }
      }
    }
  }
  .el-table {
    td {
      padding: 3px 0 !important;
    }
    th {
      padding: 5px 0 !important;
    }
  }
  .el-table__header {
    th {
      border: none;
    }
    th:first-child {
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
    }
    th:last-child {
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
    }
  }
  .statistics {
    padding: 10px;
    .hiddenRow {
      display: none;
    }
    .searchForm {
      padding: 10px;
      span.label {
        margin-right: 10px;
      }
      span.attention {
        color: #e50021;
      }
    }
  }
}
</style>
